/* eslint-disable no-param-reassign */
import { defineComponent, ref } from 'vue';
import {
  getEditorEmits,
  getUploadProps,
  useNamespace,
} from '@ibiz-template/vue3-util';
import './ibiz-image-upload.scss';
import { useIViewUpload } from '../use/use-iview-upload';
import { UploadEditorController } from '../upload-editor.controller';

export const IBizImageUpload = defineComponent({
  name: 'IBizImageUpload',
  props: getUploadProps<UploadEditorController>(),
  emits: getEditorEmits(),
  setup(props, { emit }) {
    const ns = useNamespace('image-upload');

    const c = props.controller;

    const {
      uploadUrl,
      headers,
      files,
      limit,
      onDownload,
      onError,
      onRemove,
      onSuccess,
      beforeUpload,
    } = useIViewUpload(
      props,
      value => {
        emit('change', value);
      },
      c,
    );

    const dialogImageUrl = ref<string>('');
    const dialogVisible = ref<boolean>(false);

    const onDialogVisibleChange = (value: boolean) => {
      dialogVisible.value = value;
    };

    // 预览
    const onPreview = (file: IData) => {
      dialogImageUrl.value = file.url;
      dialogVisible.value = true;
    };

    return {
      ns,
      c,
      files,
      limit,
      headers,
      uploadUrl,
      dialogImageUrl,
      dialogVisible,
      beforeUpload,
      onSuccess,
      onError,
      onRemove,
      onDownload,
      onDialogVisibleChange,
      onPreview,
    };
  },
  render() {
    // 编辑态展示
    return (
      <div
        class={[
          this.ns.b(),
          this.disabled ? this.ns.m('disabled') : '',
          this.readonly ? this.ns.m('readonly') : '',
        ]}
      >
        <div class={this.ns.e('image-upload-list')}>
          {this.files.map(item => (
            <div key={item.id} class={this.ns.e('list-item')}>
              <img src={item.url} />
              <div class={this.ns.e('list-item-cover')}>
                <ion-icon
                  class={this.ns.e('preview-icon')}
                  onClick={() => this.onPreview(item)}
                  name='search'
                ></ion-icon>
                <ion-icon
                  class={this.ns.e('download-icon')}
                  onClick={() => this.onDownload(item)}
                  name='download'
                ></ion-icon>
                <ion-icon
                  class={this.ns.e('remove-icon')}
                  onClick={() => this.onRemove(item)}
                  name='remove'
                ></ion-icon>
              </div>
            </div>
          ))}
        </div>
        <el-upload
          ref='imageUpload'
          file-list={this.files}
          action={this.uploadUrl}
          headers={this.headers}
          disabled={this.disabled}
          multiple={this.c.multiple}
          limit={this.limit}
          show-file-list={false}
          accept={this.c.accept}
          list-type={'picture-card'}
          before-upload={this.beforeUpload}
          onSuccess={this.onSuccess}
          onError={this.onError}
          onRemove={this.onRemove}
          onPreview={this.onDownload}
        >
          <ion-icon name='plus'></ion-icon>
        </el-upload>
        <el-dialog
          class={this.ns.b('modal')}
          model-value={this.dialogVisible}
          onOpen={() => this.onDialogVisibleChange(true)}
          onClose={() => this.onDialogVisibleChange(false)}
        >
          <img class={this.ns.be('modal', 'img')} src={this.dialogImageUrl} />
        </el-dialog>
      </div>
    );
  },
});
